/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  StyleSheet, ScrollView, Text, Alert
} from 'react-native';
import { StackActions, NavigationActions } from 'react-navigation';
import { Flex } from 'antd-mobile-rn';
import HomeHeader from '../components/HomeHeader';
import HomeCard from '../components/HomeCard';
import { getBusiness } from '../model/user';

export default class Home extends Component {
  static navigationOptions = ({ navigation }) => {
    const logout = navigation.getParam('logout');
    const setUp = navigation.getParam('setUp');
    const logoUrl = navigation.getParam('logoUrl') || '';
    const name = navigation.getParam('name') || '';
    const gotoAbout = navigation.getParam('gotoAbout') || '';
    return {
      header: <HomeHeader logout={logout} about={gotoAbout} setUp={setUp} logoUrl={logoUrl} name={name} />
    };
  };

  async componentWillMount() {
    const { navigation } = this.props;
    navigation.setParams({
      logout: this.logout.bind(this),
      setUp: this.setUp.bind(this),
      gotoAbout: this.gotoAbout.bind(this)
    });
    // 拉取用户信息
    const account = await READ_CACHE('account');
    const businessInfo = await getBusiness({
      mobile: account
    });
    await WRITE_CACHE('userInfo', businessInfo.dataObject || {});
    console.log('------------', businessInfo);
    navigation.setParams({
      logoUrl: businessInfo.logo || '',
      name: businessInfo.platformName || ''
    });
  }

  /**
   * 设置
   */
  setUp() {
    const { navigation } = this.props;
    const navigateAction = NavigationActions.navigate({
      routeName: 'Setting',
      params: {}
    });
    navigation.dispatch(navigateAction);
  }

  // 我的信息页
  gotoAbout() {
    const { navigation } = this.props;
    console.log('------------===');
    // 路由跳转
    const navigateAction = NavigationActions.navigate({
      routeName: 'MyInfo',
      params: {}
    });
    navigation.dispatch(navigateAction);
  }

  logout() {
    Alert.alert(
      '退出系统',
      '是否狠心离开？',
      [
        { text: '取消', onPress: () => console.log('Cancel Pressed'), style: 'cancel' },
        {
          text: '狠心退出',
          onPress: () => {
            CLEAR_All(); // 清楚所有缓存
            this.gotoLogin(); // 跳转登陆页
          }
        }
      ],
      { cancelable: false }
    );
  }

  gotoLogin() {
    const { navigation } = this.props;
    const navigateAction = StackActions.replace({
      key: navigation.state.key,
      routeName: 'Login'
    });
    navigation.dispatch(navigateAction);
  }

  render() {
    const { navigation } = this.props;
    return (
      <ScrollView style={styles.container}>
        <Flex style={styles.group} justify="between">
          <Text style={[styles.groupTitle]}>订单管理</Text>
        </Flex>
        <Flex style={styles.group} justify="between">
          <HomeCard
            imageUri="https://mxb-bucket.oss-cn-beijing.aliyuncs.com/_app/%E5%B7%B2%E4%BD%BF%E7%94%A8.png"
            title="已使用"
            click={() => navigation.push('OrderList')}
          />
          <HomeCard
            imageUri="https://mxb-bucket.oss-cn-beijing.aliyuncs.com/_app/%E9%80%80%E6%AC%BE.png"
            title="退款"
            click={() => navigation.push('OrderList')}
          />
          <HomeCard imageUri="/" title="" click={() => ''} />
        </Flex>
        <Flex style={styles.group} justify="between">
          <Text style={[styles.groupTitle]}>管理功能</Text>
        </Flex>
        <Flex style={styles.group} justify="between">
          <HomeCard
            imageUri="https://mxb-bucket.oss-cn-beijing.aliyuncs.com/_app/%E5%8D%A1%E5%88%B8%E7%AE%A1%E7%90%86.png"
            title="卡卷管理"
            click={() => navigation.push('CardWoucher')}
          />
          <HomeCard
            imageUri="https://mxb-bucket.oss-cn-beijing.aliyuncs.com/_app/%E7%89%B9%E8%89%B2%E8%8F%9C.png"
            title="商品管理"
            click={() => { }}
          />
          <HomeCard
            imageUri="https://mxb-bucket.oss-cn-beijing.aliyuncs.com/_app/%E8%90%A5%E6%94%B6%E7%AE%A1%E7%90%86.png"
            title="营收管理"
            click={() => navigation.push('RevenueAdmin')}
          />
        </Flex>
        <Flex style={styles.group} justify="between">
          <HomeCard
            imageUri="https://mxb-bucket.oss-cn-beijing.aliyuncs.com/_app/%E5%B9%BF%E5%91%8A%E7%AE%A1%E7%90%86.png"
            title="广告管理"
            click={() => navigation.push('Advertisement')}
          />
          <HomeCard
            imageUri="https://mxb-bucket.oss-cn-beijing.aliyuncs.com/_app/%E8%AF%84%E4%BB%B7%E7%AE%A1%E7%90%86.png"
            title="评价管理"
            click={() => navigation.push('EvaluationManagement')}
          />
          <HomeCard imageUri="/" title="" click={() => ''} />
        </Flex>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },
  header: {
    backgroundColor: '#3da6d0',
    height: 200
  },
  groupTitle: {
    flex: 1,
    paddingTop: 15,
    paddingBottom: 15,
    borderBottomWidth: 1,
    borderColor: '#ccc',
    borderStyle: 'solid',
    fontSize: 16,
    color: '#007ac7'
  },
  group: {
    marginBottom: 15,
    marginLeft: SCALE(68),
    marginRight: 30
  }
});
